<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style lang="">
			div{
				width: 300px;
				height: 300px;
				/*transform: rotateY(40deg)  rotateX(40deg);*/
			}
			div div{
				opacity: 0.7;
			}
			.box{
				width: 300px;
				height: 300px;
				/*background-color: red;*/
				transform-style: preserve-3d;
				position: absolute;
				left: 200px;
				top:200px;
				/*transition: all 10s;*/
				animation: move 5s infinite linear;
				
				
			}
			.box:hover{
				/*transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);*/
			}
			.box:hover .qian{
				width: 400px;
				height: 400px;
				transform: translateZ(250px);
			}
			.box:hover .hou{
				width: 400px;
				height: 400px;
				transform: translateZ(-250px);
			}
			.box:hover .zuo{
				width: 400px;
				height: 400px;
				transform: translateX(-250px) rotateY(90deg);
				
			}
			.box:hover .you{
				width: 400px;
				height: 400px;
				transform: translateX(250px) rotateY(-90deg);
			}
			.box:hover .shang {
				width: 400px;
				height: 400px;
				transform: translateY(250px) rotateX(-90deg);
			}
			.box:hover .xia{
				width: 400px;
				height: 400px;
				transform: translateY(-250px) rotateX(90deg);
			}
			.qian{
				background-color: greenyellow;
				position: absolute;
				transform: translateZ(150px);
			}
			.hou{
				background-color: darkseagreen;
				position: absolute;
				transform: translateZ(-150px);
			}
			.shang{
				background-color: yellow;
				position: absolute;
				transform: translateY(-150px) rotateX(90deg);
			}
			.xia{
				background-color: mistyrose;
				position: absolute;
				transform: translateY(150px) rotateX(-90deg);
			}
			.zuo{
				background-color: deepskyblue;
				position: absolute;
				transform: translateX(-150px) rotateY(90deg);
			}
			.you{
				background-color: lightgreen;
				position: absolute;
				transform: translateX(150px) rotateY(-90deg);
			}
			@keyframes move{
				%0{
					transform:  rotateX(0) rotateY(0) rotateZ(0);
				}
				100%{
					transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
				}
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="qian">前面</div>
			<div class="hou">后面</div>
			<div class="shang">上面</div>
			<div class="xia">下面</div>
			<div class="zuo">左面</div>
			<div class="you">右面</div>
		</div>
	</body>
</html>
